<template>
  <div class="tab-body">
    <div v-for="(item,index) in poi" :key="index" class="item" @click="showMarkersByType(item)">
      <img v-if="item.show" src="@/assets/img/mapOk.png">
      <img v-else src="@/assets/img/mapNo.png">
      <span>{{ item.name }}</span>
    </div>
  </div>

</template>

<script>
export default {
    name: 'DlgLayer',
    props: {},
    data() {
        return {

        }
    },
    computed: {
        poi() {
            return this.$store.getters.poi
        }
    },

    mounted() {
        // console.log(this.poi)
    },
    methods: {
        showMarkersByType(item) {
            this.$eventBus.$emit('showMarkersByType', item)
            var showType = this.poi.find(citem => {
                return item.sensorType === citem.sensorType
            })
            showType.show = !showType.show
            console.log(item)
            console.log(this.poi)
            this.$store.dispatch('poiSystem', this.poi)
        }
    }
}
</script>

<style lang="scss" scoped>
    .tab-body {
        margin-top: 5px;
        height: calc(100% - 30px);
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;

        .item {
            line-height: 30px;
            height: 30px;
            cursor: pointer;
            &:hover {
                font-weight: bold;
            }

            img {
                width: 20px;
                height: 20px;
                line-height: 30px;
                vertical-align: middle;
                margin-left: 20px;
            }

            span {
                color: white;
                margin-left: 5px;
            }
        }
    }
</style>
